<template>
  <div class="box-switch">
    <img src="@/assets/images/img-icon14.svg"/>箱体开关开启
    <img src="@/assets/images/img-icon13.svg"/>箱体开关关闭
  </div>
  <div style="position: absolute; top: 50px; left: 10px">
    北 <img src="@/assets/images/img-icon40.svg" width="30" style="vertical-align: middle">
  </div>
  <div class="lamp-wrap scrollBar"
       :class="currentMenu == 3 ? 'house-all' : ''"
       :style="setStyle()">
    <template v-for="(item,index) in lampData">
      <div class="house" v-if="item.towername"
           :style="{'margin-top': item.towerArea == 2 && item.towerNumber == 5 ? '-500px' :''}">
        <template v-for="(opt,i) in item.lightList">
          <div class="lamp" :class="{ 'lamp-empty': opt.lightType == 5 || opt.lightType == 3 }"
               @click.stop="menuHandle(opt,item)"
               @mouseleave.stop="leaveLampHandle"
               @mouseover="switchHandle($event, opt,item,'')">
            <template v-if="opt.lightType == 1">
              <img v-if="opt.lightStatus == 1" src="@/assets/images/img-icon36.svg"/>
              <img v-else src="@/assets/images/img-icon35.svg"/>
            </template>
            <img v-else-if="opt.lightType == 2" src="@/assets/images/img-icon33.svg"/>
            <img v-else-if="opt.lightType == 4" src="@/assets/images/img-icon34.svg"/>
            <img v-else-if="opt.lightType == 6" src="@/assets/images/img-icon7.svg"/>
            <div class="txt">{{ opt.lightnameFact }}</div>
          </div>
        </template>
        <div class="lamp-area" v-for="opt in item.scene">
          <div class="handle-btn">
            <div :style="{'color': opt.status == 0 ? '#fff' : '#366',
              'background': opt.status == 0 ? '#3CBDFF' : ''}">现场</div>
            <div :class="{'on':opt.status == 1 && item.manual == 0}" @click="lighthouseHandle(item,0, 'house')">自动</div>
            <div :class="{'on':opt.status == 1 && item.manual == 1}" @click="lighthouseHandle(item,1, 'house')">手动</div>
          </div>
          <div class="add-icon" @click="addLampHandle(item,'house')"></div>
          <div class="edit-icon" @click.stop="menuHandle({}, item,  'house')"></div>
          <div class="icon-close" @click.stop="delHandle(item)"></div>
        </div>
      </div>
      <div v-else class="bridge"
           :style="{ height: item._lightList.length/2*55 + 100 +'px' }">
        <div class="lamp" :class="'lamp'+index"
             @click.stop="menuHandle(opt,item)"
             @mouseleave.stop="leaveLampHandle"
             @mouseover="switchHandle($event, opt, item,'')"
             v-for="(opt,i) in item._lightList">
          <template v-if="opt.lightType == 1">
            <img v-if="opt.lightStatus == 1" src="@/assets/images/img-icon36.svg"/>
            <img v-else src="@/assets/images/img-icon35.svg"/>
          </template>
          <img v-else-if="opt.lightType == 2" src="@/assets/images/img-icon33.svg"/>
          <img v-else-if="opt.lightType == 4" src="@/assets/images/img-icon34.svg"/>
          <img v-else-if="opt.lightType == 6" src="@/assets/images/img-icon7.svg"/>
          <div class="txt">{{ opt.lightnameFact }}</div>
        </div>
        <div class="lamp-area"
             :style="{ 'height': item._lightList.length/2*55-20+'px' }">
          <div v-for="opt in item.scene">
            <div class="handle-btn">
              <div :style="{'color': opt.status == 0 ? '#fff' : '#366',
              'background': opt.status == 0 ? '#3CBDFF' : ''}">现场</div>
              <div :class="{'on':opt.status == 1 && item.manual == 0}" @click="lighthouseHandle(item,0, 'bridge')">自动</div>
              <div :class="{'on':opt.status == 1 && item.manual == 1}" @click="lighthouseHandle(item,1, 'bridge')">手动</div>
            </div>
          </div>
          <div class="add-icon" @click="addLampHandle(item,'bridge')"></div>
          <div class="edit-icon" @click.stop="menuHandle({}, item, 'bridge')"></div>
        </div>
      </div>
    </template>
    <div class="sure-btn add-btn" :style="{ 'margin-top' : currentMenu == 3 ? '100px' : '' }"
         v-if="userInfo.role == 0" @click="addHouseHandle">添加</div>

    <div class="lamp-btns">
      <!--   只显示箱体 type = 2   type:1(现场)  -->
      <div class="item" :class="{ 'lamp-bridge': item.type == 2 }" v-for="item in lampName">
        <div class="box">
          <!--  箱体  -->
          <template v-for="(opt,i) in item.switchList">
            <template v-if="opt.type == 2">
              <div class="txt" v-if="i == 0">{{ opt.switchnameFact }}</div>
              <div class="img">
                <img v-if="opt.status == 1" src="@/assets/images/img-icon13.svg" width="21"/>
                <img v-else src="@/assets/images/img-icon14.svg" width="21"/>
              </div>
            </template>
          </template>
        </div>
        <div class="net">
          <!--  网关  -->
          <template v-if="Array.isArray(item.gatewaylist)">
            <span class="lamp-name">{{ item.name }}</span>
            <template v-for="opt in item.gatewaylist">
              <span class="status" :class="{ 'online': opt.onlineStatus == 1 }">
                <template v-if="opt.onlineStatus == 1">在线</template>
                <template v-else>离线</template>
              </span>
            </template>
          </template>
          <template v-else>
            <span class="lamp-name">{{ item.name }}</span>
            <span class="status" :class="{ 'online': item.gatewaylist.onlineStatus == 1 }">
              <template v-if="item.gatewaylist.onlineStatus == 1">在线</template>
              <template v-else>离线</template>
            </span>
          </template>
        </div>
      </div>
    </div>

    <div class="lamp-area-name">
      <template v-if="currentMenu == 1">一区</template>
      <template v-else-if="currentMenu == 2">二区</template>
      <template v-else-if="currentMenu == 3">散货码头</template>
    </div>
  </div>

  <div class="lamp-menu" v-show="showMenu"
       @mouseleave.stop="lampMenuLeaveHandle($event)"
       @mouseover="lampMenuEnterHandle"
       :style="{ left: this.clientX, top: this.clientY }">
    <template v-if="userInfo.role == 0 || userInfo.role == 3 || flagScene">
      <div style="padding: 0 20px">
        开关映射：<span>{{ currLamp.lightname }}</span>
      </div>
    </template>
    <template v-if="(userInfo.role == 1 || userInfo.role == 2) && !flagScene">
      <edit-lamp-new ref="editLampNew"
                     :mappingData="mappingData"
                     @saveOk="init"></edit-lamp-new>
    </template>
  </div>

  <edit-lamp ref="editLamp" :mappingData="mappingData" @saveOk="init"></edit-lamp>
  <add-lamp ref="addLamp" :mappingData="mappingData" @saveOk="init"></add-lamp>
  <add-house ref="addHouse" @saveOk="init"></add-house>
  <del-lamp ref="delLamp" @delHandle="init"></del-lamp>
</template>

<script>
import {mapGetters} from "vuex";
import {
  BrigeZongLan, judgeLightOnline, refreshGatewayData, TowerZongLan,
  updateBrigeManual, updateTowerManual
} from "../../router/api.js";
import EditLamp from "./editLamp.vue";
import AddLamp from "./addLamp.vue";
import AddHouse from "./addHouse.vue";
import EditLampNew from "./editLampNew.vue";
import DelLamp from "./delLamp.vue";

export default {
  name: "index",
  components: {DelLamp, EditLampNew, AddHouse, AddLamp, EditLamp},
  computed: {
    ...mapGetters(['currentMenu','userInfo','refreshFlag'])
  },
  data() {
    return {
      lampData: [],
      bridgeClass: [],
      lampName: [],
      bridgeHeight: 0,
      showMenu: false,
      clientX: 0,
      clientY: 0,
      bodyWidth: 1200,
      bodyHeight: 960,
      mappingList: {},
      mappingData: [],
      timer: null,
      currLamp: {},
      fetchingFlag: true,
      onSiteList: [],
      isMenu: false,
      flagScene: false,
      flagRequest: false
    }
  },
  watch: {
    'currentMenu': {
      deep: true,
      immediate: true,
      handler(n) {
        this.init();

        this.timer = setInterval(() => {
          if(this.fetchingFlag){
            this.getLampData();
          }
        }, 1000 * 5)
      }
    },
    'refreshFlag': {
      deep: true,
      handler(n) {
        if(n) {
          refreshGatewayData().then(res => {
            if(res.data.code == 200){
              this.init()

              this.$store.commit('SET_WAIT', true)
            }
          });
        }
      }
    }
  },
  created() {
    this.bodyWidth = document.documentElement.clientWidth;
    this.bodyHeight = document.documentElement.clientHeight;
  },
  mounted() {
    /*document.addEventListener("click", (ev) => {
      if (!this.showMenu || (ev.target.className !== 'lamp' && ev.target.className !== 'edit-icon')) {
        this.showMenu = false;
      }
    });*/
  },
  beforeRouteLeave(to, from, next) {
    clearInterval(this.timer);
    this.timer = null;
    this.fetchingFlag = false;

    next();
  },
  methods: {
    init(){
      this.getLampData();
    },
    setStyle(){
      let dom = document.querySelector('.lamp-content');
      if(!dom) return;
      let w = this.lampData.length*250+300;
      let boxW = dom.clientWidth - 100;
      let _width = w < boxW ? boxW : w;

      return {
        width: _width+'px',
        height: this.bridgeHeight + 100+'px'
      }
    },
    async getLampData() {
      this.fetchingFlag = true;

      // this.lampData = [];
      this.bridgeClass = [];
      // this.lampName = [];
      this.mappingList = [];
      this.onSiteList = [];

      let resLamp = await TowerZongLan();
      let resLampBridge = await BrigeZongLan()
      let lighthouse = [], lampBridge = [];
      if (resLamp.data.code == 200) {
        lighthouse = JSON.parse(JSON.stringify(resLamp.data.data)).filter(opt => opt.towerArea == this.currentMenu);
      }
      if (resLampBridge.data.code == 200) {
        lampBridge = JSON.parse(JSON.stringify(resLampBridge.data.data)).filter(opt => opt.brigeArea == this.currentMenu);
        let h = 0;
        lampBridge.forEach((item, idx) => {
          let v = item.lightList.filter(opt => opt.lightType != 5);
          item['_lightList'] = v;
          let height = v.length / 2 * 55;
          if (height > h) h = height;

          let n = lighthouse.length > 3 ? 3 : lighthouse.length;
          this.bridgeClass.push({className: 'lamp' + (n + idx), length: v.length})
        })
        this.bridgeHeight = h || 250;
      }

      this.lampData = lighthouse;
      if (this.lampData.length >= 3) {
        this.lampData.splice(3, 0, ...lampBridge)
      } else {
        this.lampData.push(...lampBridge)
      }
      let lampNameArr = [];
      this.lampData.forEach(opt => {
        let name = opt.towername || opt.brigename;
        lampNameArr.push({
          name,
          status: opt.manual,
          gatewaylist: opt.gatewaylist,
          switchList: opt.switchList
        })

        opt['scene'] = opt.switchList.filter(o => o.type == 1);
        opt['scene'].sort((a, b) => {
          if (a.gatewayId === b.gatewayId) {
            return a.location - b.location;
          }
          return a.gatewayId - b.gatewayId;
        });

        if(Array.isArray(opt.gatewaylist)){
          this.onSiteList.push(...opt.gatewaylist)
        }else{
          this.onSiteList.push(opt.gatewaylist)
        }

        this.mappingList[name] = [];
        let tmp = opt.lightList.filter(o => o.lightType == 5);
        this.mappingList[name] = tmp;
      })
      this.viewLamp();

      let resOnLine = await judgeLightOnline();
      if(resOnLine.data.code == 200){
        let onLine = resOnLine.data.data;
        lampNameArr.forEach(item => {
          let is = Array.isArray(item.gatewaylist);
          if(is){
            item.gatewaylist.forEach(opt => {
              opt['onlineStatus'] = onLine[opt.gatewayId];
            })
          }else{
            item.gatewaylist['onlineStatus'] = onLine[item.gatewaylist.gatewayId];
          }
        })

        this.lampName = lampNameArr;
      }else{
        // this.$message.warning(resOnLine.data.msg)
      }
      this.$store.commit('SET_ONSITELIST', this.onSiteList);
      this.$store.commit('SET_REFRESHFLAG', false)

      this.setStyle();
    },
    viewLamp() {
      this.$nextTick(() => {
        let lampNum = 0
        if(this.currentMenu == 1){
          //一区 48
          lampNum = 12
        }else if(this.currentMenu == 2){
          //二区 60
          lampNum = 16;
        }
        this.bridgeClass.forEach(opt => {
          let className = '.bridge .' + opt.className;
          let bridgeLamp = document.querySelectorAll(className);
          let _top = 55;
          for (let i = 1; i < bridgeLamp.length; i++) {
            let dom = bridgeLamp[i];

            let col = parseInt(i / lampNum);
            if(col == 0){
              dom.style.top = i * _top + 'px';
              dom.style.left = 0;
            }else if(col == 1){
              dom.style.top = (i - lampNum) * _top + 'px';
              dom.style.left = '165px';
            }else if(col == 2){
              dom.style.top = (i - lampNum*2) * _top + 'px';
              dom.style.left = '-50px';
            }else if(col == 3){
              dom.style.top = (i - lampNum*3) * _top + 'px';
              dom.style.left = '215px';
            }

            /*let n = parseInt(opt.length / 2)
            if (i < n) {
              dom.style.top = i * _top + 'px';
              dom.style.left = 0;
            } else {
              dom.style.top = (i - n) * _top + 'px';
              dom.style.left = '165px';
            }*/
          }
        })
      })
    },
    switchHandle(event, opt,item,str) {
      //有一个是现场那么就不能再操作灯塔或灯桥了 status = 0
      this.flagScene = item.scene.some(o => o.status == 0)
      if(item.manual == 0) { this.flagScene = true }

      this.currLamp = opt;
      let scrollTop = document.querySelector('.lamp-content').scrollTop
      let w = this.bodyWidth - 510;
      this.showMenu = true;
      const {clientX, clientY} = event;
      if (clientX < w) {
        this.clientX = clientX - 135 + "px";
      } else {
        if(this.flagScene){
          this.clientX = clientX - 340 + "px";
        }else{
          this.clientX = clientX - 630 + "px";
        }
      }

      let h = this.bodyHeight - (clientY + scrollTop);
      if(this.flagScene){
        if(h < 180){
          this.clientY = clientY + scrollTop - 180 + "px";
        }else{
          this.clientY = clientY + scrollTop - 100 + "px";
        }
      }else{
        if(h < 400){
          this.clientY = clientY + scrollTop - 380 + "px";
        }else{
          this.clientY = clientY + scrollTop - 100 + "px";
        }
      }
      this.menuHandle(opt,item, str)
    },
    menuHandle(opt,item, str) {
      //手动才可以编辑，自动不可编辑 manual：0（自动）1（手动）
      //有一个是现场那么就不能再操作灯塔或灯桥了 status = 0
      this.flagScene = item.scene.some(o => o.status == 0);
      if(str && this.flagScene) return;

      if(this.userInfo.role == 0 || this.userInfo.role == 3) return;
      if(item.manual == 0) { this.flagScene = true }
      if(!str){
        if(opt.lightType == 1){
          let name = item.towername || item.brigename;
          this.mappingData = this.mappingList[name]
        }
      }
      if(str){
        this.$refs.editLamp && this.$refs.editLamp.show(opt,item, str);
      }else{
        this.$refs.editLampNew && this.$refs.editLampNew.show(opt,item, str);
      }
    },
    lighthouseHandle(item,type, str){
      if(this.userInfo.role == 3) return;
      //type 0: 自动   1：手动
      if(str == 'house'){
        let {towerId, towerArea, towerNumber} = item;
        updateTowerManual({
          towerId,
          newManual: type,
          towerArea,
          towerNumber
        }).then(res => {
          this.lighthSuccHandle(res)
        })
      }else{
        let {brigeId, brigeArea, brigeNumber} = item;
        updateBrigeManual({
          brigeId,
          newManual: type,
          brigeArea,
          brigeNumber,
        }).then(res => {
          this.lighthSuccHandle(res)
        })
      }
    },
    lighthSuccHandle(res){
      if(res.data.code == 200){
        // this.$message.success(res.data.msg);
        this.init();
      }else{
        // this.$message.warning(res.data.msg);
      }
    },
    addLampHandle(item,str){
      //有一个是现场那么就不能再操作灯塔或灯桥了 status = 0
      let is = item.scene.some(o => o.status == 0);
      if(is) return;

      if(this.userInfo.role == 3) return;

      let name = item.towername || item.brigename;
      this.mappingData = this.mappingList[name];
      if(this.mappingData.length){
        this.$refs.addLamp.show(item,str)
      }
    },
    addHouseHandle(){
      if(this.userInfo.role == 3) return;

      this.$refs.addHouse.show();
    },
    delHandle(item,str){
      this.$refs.delLamp.show();
    },
    leaveLampHandle(){
      setTimeout(() => {
        if(!this.isMenu){
          this.showMenu = false
        }
      },1000)
    },
    lampMenuLeaveHandle(ev){
      this.isMenu = false
      this.showMenu = false;
    },
    lampMenuEnterHandle(){
      this.isMenu = true;
      this.showMenu = true
    },
  }
}
</script>

<style scoped lang="scss">
.add-btn{
  position: absolute;
  right: 0;
}
.add-btn:before {
  content: "\e609";
}
.box-switch {
  position: fixed;
  top: 92px;
  left: 96px;
  display: flex;
  font-size: 16px;
  font-weight: 400;
  color: #336666;

  img {
    width: 21px;
    margin-right: 5px;

    &:last-child {
      margin-left: 25px;
    }
  }
}

.lamp-wrap {
  //width: calc(100% + 180px);
  //width: fit-content;
  display: flex;
  align-items: center;
  margin-left: 100px;
  margin-top: 25px;
  position: relative;
  z-index: 8;

  .house, .bridge {
    float: left;

    .lamp {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      //border: 1px solid #D8E7F7;
      //background-color: #E2F3FB;
      background: url("@/assets/images/lamp-bg-def.svg") no-repeat left top;
      background-size: 100% 100%;
      color: #336666;
      font-size: 12px;
      font-weight: 400;
      text-align: center;
      position: absolute;
      z-index: 2;
      user-select: none;

      &:hover {
        background: url("@/assets/images/lamp-bg-on.svg") no-repeat left top;
        background-size: 100% 100%;
      }

      /*&:before {
        content: '';
        width: 48px;
        position: absolute;
        left: 1px;
        top: 34px;
        border-top: 1px solid #8ED7FE;
      }*/

      img {
        width: 20px;
        height: 20px;
        margin-top: 6px;
      }

      .txt {
        margin-top: 2px;
      }
    }
  }

  .house {
    width: 251px;
    height: 251px;
    margin-right: 12px;
    position: relative;
    flex-shrink: 0;

    &:first-child {
      margin-left: 100px;
    }

    .lamp {
      &:nth-child(1), &:nth-child(2), &:nth-child(3) {
        top: 0;
      }
      &:nth-child(7), &:nth-child(8), &:nth-child(9) {
        top: 200px;
      }
      &:nth-child(1), &:nth-child(9), &:nth-child(13), &:nth-child(21) {
        left: 45px;
      }
      &:nth-child(2), &:nth-child(8), &:nth-child(14), &:nth-child(20) {
        left: 100px;
      }
      &:nth-child(3), &:nth-child(7), &:nth-child(15), &:nth-child(19) {
        left: 155px;
      }
      &:nth-child(10), &:nth-child(11), &:nth-child(12) {
        left: 0;
      }
      &:nth-child(4), &:nth-child(5), &:nth-child(6) {
        left: 200px;
      }
      &:nth-child(4), &:nth-child(12), &:nth-child(16), &:nth-child(14) {
        top: 45px;
      }
      &:nth-child(5), &:nth-child(11), &:nth-child(17), &:nth-child(23) {
        top: 100px;
      }
      &:nth-child(6), &:nth-child(10), &:nth-child(18), &:nth-child(22) {
        top: 155px;
      }
      &:nth-child(13), &:nth-child(14), &:nth-child(15) {
        top: -50px;
      }
      &:nth-child(19), &:nth-child(20), &:nth-child(21) {
        top: 250px;
      }
      &:nth-child(22), &:nth-child(23), &:nth-child(24) {
        left: -50px;
      }
      &:nth-child(16), &:nth-child(17), &:nth-child(18) {
        left: 250px;
      }

      /*


      &:nth-child(10), &:nth-child(11), &:nth-child(12) {
        top: 200px;
      }

      &:nth-child(1), &:nth-child(10) {
        left: 45px;
      }

      &:nth-child(2), &:nth-child(11) {
        left: 100px;
      }

      &:nth-child(3), &:nth-child(12) {
        left: 155px;
      }

      &:nth-child(4), &:nth-child(5), &:nth-child(6) {
        left: 0;
      }

      &:nth-child(7), &:nth-child(8), &:nth-child(9) {
        left: 200px;
      }

      &:nth-child(4), &:nth-child(7) {
        top: 45px;
      }

      &:nth-child(5), &:nth-child(8) {
        top: 100px;
      }

      &:nth-child(6), &:nth-child(9) {
        top: 155px;
      }*/
    }

    .lamp-empty{
      display: none;
    }

    .lamp-area {
      width: 140px;
      height: 140px;
      background-color: #E7F3F9;
      position: absolute;
      left: 55px;
      top: 55px;
      border-radius: 8px;
      text-align: center;

      .handle-btn {
        display: flex;
        justify-content: center;
        margin-top: 34px;
        margin-bottom: 10px;

        div {
          width: 30%;
          height: 35px;
          line-height: 35px;
          text-align: center;
          border: 1px solid #3CBDFF;
          font-size: 16px;
          font-weight: 400;
          color: #4D7D80;
          cursor: pointer;
          user-select: none;

          &:hover, &.on {
            color: #fff;
            background-color: #3CBDFF;
          }

          &:nth-child(1){
            &:hover{
              color: #4D7D80;
              background-color: initial;
            }
          }
        }
      }
      img{
        cursor: pointer;
      }
    }
  }

  .bridge {
    width: 217px;
    margin-left: 18px;
    margin-right: 30px;
    position: relative;
    flex-shrink: 0;

    .lamp-area {
      width: 106px;
      height: 800px;
      background-color: #E7F3F9;
      position: absolute;
      left: 55px;
      top: 10px;
      border-radius: 8px;

      .handle-btn {
        width: 45px;
        margin: 30px auto 6px;

        div {
          width: 100%;
          height: 35px;
          line-height: 35px;
          text-align: center;
          border: 1px solid #3CBDFF;
          font-size: 16px;
          font-weight: 400;
          color: #4D7D80;
          cursor: pointer;
          user-select: none;

          &:hover, &.on {
            color: #fff;
            background-color: #3CBDFF;
          }
          &:nth-child(1){
            &:hover{
              color: #4D7D80;
              background-color: initial;
            }
          }
        }
      }
      img{
        display: block;
        margin: 0 auto;
        cursor: pointer;
      }
    }
  }

  .add-icon{
    width: 20px;
    height: 20px;
    background: url("@/assets/images/img-icon38.svg") no-repeat left top;
    background-size: 100% 100%;
    display: inline-block;
    margin-right: 10px;
    cursor: pointer;
    &:hover{
      background: url("@/assets/images/img-icon39.svg") no-repeat left top;
    }
  }
  .edit-icon{
    width: 20px;
    height: 20px;
    background: url("@/assets/images/img-icon31.svg") no-repeat left top;
    background-size: 100% 100%;
    display: inline-block;
    cursor: pointer;
    &:hover{
      background: url("@/assets/images/img-icon37.svg") no-repeat left top;
    }
  }

  .bridge{
    .add-icon, .edit-icon{
      display: block;
      margin: 8px auto 0px;
    }
  }
}
.house-all{
  align-items: normal;
}

.lamp-btns {
  width: calc(100% - 100px);
  padding-left: 100px;
  display: flex;
  align-items: center;
  position: absolute;
  bottom: 0;
  background: url("@/assets/images/img-center-border.png") no-repeat left top;
  background-size: 100% 100%;

  .item {
    width: 251px;
    margin-right: 12px;
    text-align: center;
    position: relative;

    .box {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 10px;

      div {
        border: 1px solid #E8EEFA;
      }

      .txt {
        //width: 20px;
        height: 30px;
        line-height: 30px;
      }

      .img {
        width: 30px;
        height: 26px;
        text-align: center;
        padding-top: 4px;
      }
    }
    .net{
      margin-bottom: 10px;
    }

    .lamp-name {
      font-size: 18px;
      font-weight: 400;
      color: #336666;
      margin-right: 10px;
    }

    .status {
      width: 60px;
      height: 30px;
      line-height: 32px;
      text-align: center;
      border: 1px solid #9298AA;
      background-color: #98ACB6;
      border-radius: 16px;
      font-size: 16px;
      font-weight: 400;
      color: #fff;
      display: inline-block;
    }

    .online {
      background-color: #57D695;
      border-color: #39CF7C;
    }
  }

  .lamp-bridge {
    width: 217px;
    margin-left: 18px;
    margin-right: 30px;
  }
}

.lamp-menu {
  //width: 200px;
  //height: 85px;
  line-height: 85px;
  text-align: center;
  background-color: #8E9DB0;
  border-radius: 4px;
  font-size: 18px;
  font-weight: 400;
  color: #fff;
  position: absolute;
  z-index: 8;

  span {
    font-weight: 700;
  }
}

.lamp-area-name {
  width: 104px;
  height: 42px;
  line-height: 42px;
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  color: #366;
  position: fixed;
  left: 220px;
  bottom: 100px;
  z-index: 9;
  background: url("@/assets/images/img-area-bg.svg") no-repeat left top;
  background-size: 100% 100%;
}
</style>
